<!-- @format -->

<template>
  <div class="login-container">
    <!-- LOGO区域 -->
    <div class="logo-box">
      <div class="logo-image">
        <svg
          width="120"
          height="120"
          viewBox="0 0 120 120"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>
            <linearGradient
              id="logoGradient"
              x1="0%"
              y1="0%"
              x2="100%"
              y2="100%"
            >
              <stop offset="0%" stop-color="#0075f7" />
              <stop offset="100%" stop-color="#01a7fb" />
            </linearGradient>
          </defs>
          <circle cx="60" cy="60" r="50" fill="url(#logoGradient)" />
          <path
            d="M40 45 L50 35 L70 55 L80 45 L90 55 L70 75 L50 55 Z"
            fill="white"
          />
          <circle cx="60" cy="85" r="8" fill="white" />
        </svg>
      </div>
      <div class="logo-text">悦动派</div>
    </div>

    <!-- 登录按钮区域 -->
    <div class="login-actions">
      <!-- 微信手机号登录 -->
      <button
        class="wechat-login"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
        :disabled="!agreeStatus"
      >
        微信手机号快捷登录
      </button>

      <!-- 其他登录方式 -->
      <div class="other-login" @click="handleOtherLogin">使用其他号码登录</div>
    </div>

    <!-- 协议区域 -->
    <div class="agreement-box">
      <div class="agreement-checkbox" @click="toggleAgreement">
        <div class="checkbox" :class="{ checked: agreeStatus }">
          <span v-if="agreeStatus" class="check-icon">✓</span>
        </div>
        <span class="agreement-text">
          我已阅读并同意
          <span class="link-text" @click.stop="goToAgreement('user')"
            >《用户协议》</span
          >
          和
          <span class="link-text" @click.stop="goToAgreement('privacy')"
            >《隐私协议》</span
          >
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getMemberAuthWxLogin } from '@/api/login';

  // 是否同意协议
  const agreeStatus = ref(false);

  // 切换协议同意状态
  const toggleAgreement = () => {
    agreeStatus.value = !agreeStatus.value;
  };

  // 微信登录
  const handleWechatLogin = () => {
    if (!agreeStatus.value) {
      uni.showToast({
        title: '请先同意用户协议和隐私协议',
        icon: 'none',
      });
      return;
    }

    // 提示用户点击微信授权按钮
    uni.showToast({
      title: '请点击微信授权按钮',
      icon: 'none',
    });
  };

  // 微信手机号授权登录
  const getPhoneNumber = async (e: any) => {
    console.log('微信授权结果:', e.detail);

    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
      uni.showToast({
        title: '授权失败，请重试',
        icon: 'none',
      });
      return;
    }

    // 检查是否同意协议
    if (!agreeStatus.value) {
      uni.showToast({
        title: '请先同意用户协议和隐私协议',
        icon: 'none',
      });
      return;
    }

    try {
      // 显示加载提示
      uni.showLoading({
        title: '登录中...',
      });

      // 获取微信登录凭证
      const loginRes: any = await new Promise((resolve, reject) => {
        uni.login({
          provider: 'weixin',
          success: resolve,
          fail: reject,
        });
      });

      console.log('微信登录凭证:', loginRes);

      // 这里应该调用后端API进行登录验证
      const loginData = {
        loginCode: loginRes?.code,
        phoneCode: e.detail.code,
        state: 'default',

        // loginCode: '0b3B25000zbQwU1VDB000udt4u1B250I',
        // phoneCode:
        //   '54dd8b5385a4f6ff1b1d1c4b7c742b6f6bd834bc79a2c4b75a653b3f2e4abc27',
        // state: 'default',
      };

      const result = await getMemberAuthWxLogin(loginData);

      // 模拟登录成功
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '登录成功',
          icon: 'success',
        });

        // 登录成功后跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/home/Index',
          });
        }, 1500);
      }, 2000);
    } catch (error) {
      console.error('微信登录失败:', error);
      uni.hideLoading();
      uni.showToast({
        title: '登录失败，请重试',
        icon: 'none',
      });
    }
  };

  // 其他登录方式
  const handleOtherLogin = () => {
    if (!agreeStatus.value) {
      uni.showToast({
        title: '请先同意用户协议和隐私协议',
        icon: 'none',
      });
      return;
    }

    // 跳转到手机号登录页面
    uni.navigateTo({
      url: '/pages/login/phone',
    });
  };

  // 跳转到协议页面
  const goToAgreement = (type: string) => {
    const url =
      type === 'user' ? '/pages/agreement/user' : '/pages/agreement/privacy';
    uni.navigateTo({
      url,
    });
  };
</script>

<style lang="scss" scoped>
  .login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, $bg 0%, $bg2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64rpx 32rpx;
    position: relative;

    box-sizing: border-box;
  }

  .logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 120rpx;
  }

  .logo-image {
    width: 240rpx;
    height: 240rpx;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16rpx 48rpx rgba(0, 117, 247, 0.2);
    margin-bottom: 32rpx;
  }

  .logo-text {
    font-size: 48rpx;
    font-weight: 600;
    color: #333333;
    letter-spacing: 4rpx;
  }

  .login-actions {
    width: 100%;
    max-width: 640rpx;
    margin-bottom: 80rpx;
  }

  .wechat-login {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(135deg, #666666 0%, #888888 100%);
    border-radius: 48rpx;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 32rpx;
    box-shadow: 0 8rpx 24rpx rgba(102, 102, 102, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;

    &:not(:disabled):active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 12rpx rgba(102, 102, 102, 0.3);
    }

    &:disabled {
      background: linear-gradient(135deg, #cccccc 0%, #dddddd 100%);
      color: #999999;
      box-shadow: 0 4rpx 12rpx rgba(204, 204, 204, 0.2);
      cursor: not-allowed;
      transform: none;
    }
  }

  .other-login {
    width: 100%;
    height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $main;
    font-size: 28rpx;
    font-weight: 500;
    transition: all 0.3s ease;

    &:active {
      opacity: 0.7;
    }
  }

  .agreement-box {
    position: absolute;
    bottom: 64rpx;
    left: 32rpx;
    right: 32rpx;
  }

  .agreement-checkbox {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .checkbox {
    width: 32rpx;
    height: 32rpx;
    border: 2rpx solid #cccccc;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;
    margin-top: 4rpx;
    flex-shrink: 0;
    transition: all 0.3s ease;

    &.checked {
      background: linear-gradient(135deg, $main 0%, $main2 100%);
      border-color: $main;
    }
  }

  .check-icon {
    color: #ffffff;
    font-size: 20rpx;
    font-weight: bold;
  }

  .agreement-text {
    font-size: 24rpx;
    color: #666666;
    line-height: 1.5;
    text-align: center;
  }

  .link-text {
    color: $main;
    text-decoration: none;

    &:active {
      opacity: 0.7;
    }
  }

  /* H5 适配 */
  @media screen and (min-width: 768px) {
    .login-container {
      max-width: 768rpx;
      margin: 0 auto;
      padding: 80rpx 64rpx;
    }

    .logo-box {
      margin-bottom: 160rpx;
    }

    .login-actions {
      max-width: 480rpx;
    }

    .wechat-login,
    .other-login {
      &:hover {
        opacity: 0.9;
      }
    }

    .agreement-box {
      position: static;
      margin-top: 80rpx;
    }
  }
</style>
